<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1 {
				width: 500px;
				height: 500px;
				background-color: #BBFFAA;
				background-image: url(img/2.jpg);
				/*
				背景图片默认贴着左上角显示
				*/
				background-repeat: no-repeat;
				/*
				总共取值：top left right bottom center
				也可以是 top left
				如果是 一个值top，那么实际上是 top center
				
				也可以直接指定两个偏移量 xpos ypos
				例如：background-position: +-100px +-50px;
				
				*/
				/* background-position: center; */
				background-position: 100px 50px;
				margin: 50px auto;
			}
			
			body{
				height: 5000px;
				background-image: url(img/2.jpg);
				background-repeat: no-repeat;
				/*
				scroll 默认值 背景图片会随着窗口滚动
				fixed 背景图片会固定在某一个位置
				
				不随窗口滚动的图片，一般放在body，不放在其它元素。
				*/
				background-attachment: fixed;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<!-- 
			这里有一个很好玩的效果，注意看
			 H:\尚硅谷前端学科全套教程\1.前端学科--基础阶段\尚硅谷HTML+CSS教程\视频\视频4
			 《76.尚硅谷_HTML&CSS基础_背景二》
			 -->
		</div>
	</body>
</html>
